
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>数据统计</div>
         --> <div class="hei10"></div>
				<div class="real-time-data">
					<div class="t-box">
						<div class="title">实时数据</div>
						<div class="update-time">更新时间：{{number.updated_at}}</div>
					</div>
					<div class="order-data">
						<div class="time-data-box">
							<div class="order">
								<img class="order-icon" src="../../../static/img/order-icon01.png">
								<div class="text">
									<span class="tit">提交订单数</span>
									<span class="num">{{number.orders_count?number.orders_count:0}}</span>
								</div>
							</div>
							<div class="ydata">昨日全天 {{ydata.orders_count?ydata.orders_count:0}}</div>
						</div>
						<div class="time-data-box">
							<div class="order">
								<img class="order-icon" src="../../../static/img/order-icon02.png">
								<div class="text">
									<span class="tit">审核通过数</span>
									<span class="num">{{number.submit_count?number.submit_count:0}}</span>
								</div>
							</div>
							<div class="ydata">昨日全天 {{ydata.submit_count?ydata.submit_count:0}}</div>
						</div>
						<div class="time-data-box">
							<div class="order">
								<img class="order-icon" src="../../../static/img/order-icon03.png">
								<div class="text">
									<span class="tit">生产发货数</span>
									<span class="num">{{number.deliver_count?number.deliver_count:0}}</span>
								</div>
							</div>
							<div class="ydata">昨日全天 {{ydata.deliver_count?ydata.deliver_count:0}}</div>
						</div>
						<div class="time-data-box">
							<div class="order">
								<img class="order-icon" src="../../../static/img/order-icon04.png">
								<div class="text">
									<span class="tit">退款成功数</span>
									<span class="num">{{number.refund_count?number.refund_count:0}}</span>
								</div>
							</div>
							<div class="ydata">昨日全天 {{ydata.refund_count?ydata.refund_count:0}}</div>
						</div>
					</div>
				</div>
				<div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
				<div class="sales-situation" v-loading="salesloading" v-if="func.L01">
					<div class="title">销售概况</div>
					<div class="btn-box">
						<el-button :type="form1.day ? 'danger' : ''" @click="timechange1('day')">今天</el-button>
						<el-button :type="form1.yesterday ? 'danger' : ''" @click="timechange1('yesterday')">昨天
						</el-button>
						<el-button :type="form1.week ? 'danger' : ''" @click="timechange1('week')">最近一周</el-button>
						<el-button :type="form1.month ? 'danger' : ''" @click="timechange1('month')">最近30天</el-button>
						<el-date-picker style="width: 400px;margin-left: 10px;" v-model="form1.time"
							@change="timechange1" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
							range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
					</div>
					<div class="con con-table">
						<div class="list">
							<div class="th">基础产品</div>
							<div class="th t-total">合计</div>
							<div class="th" v-for="item in allsale.head_row" :key="item.order_page_id">{{item.title}}
							</div>
						</div>
						<div class="list">
							<div class="td">合计</div>
							<div class="td t-total">{{allsale.orders_total}}</div>
							<div class="td" v-for="item in allsale.head_row" :key="item.order_page_id">
								{{item.orders_amount}}</div>
						</div>
						<div class="list" v-for="(item,index) in allsale.rows.data" :key="index">
							<div class="td">{{item.name}}</div>
							<div class="td t-total">{{item.orders_all_amount}}</div>
							<div class="td" v-for="items in allsale.head_row" :key="items.order_page_id">
								{{item[`${items.order_page_id}_amount`]}}</div>
						</div>
						<div class="seemore">
							<router-link class="morebtn" to="/dataExcel/all_report">查看更多...</router-link>
						</div>
					</div>
				</div>

				<div v-loading="loading">
					<div class="tabs">
						<div :class="tab == 1 ? 'tab active' : 'tab'"  v-if="func.L02" @click="tabChange(1)">店铺销售情况</div>
						<div :class="tab == 2 ? 'tab active' : 'tab'"  v-if="func.L03" @click="tabChange(2)">分销商销售情况</div>
					</div>
					<div v-if="tab == 1 && func.L02" >
						<div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
						<div class="btn-box">
							<el-button type="danger" @click="daochu">导出店铺销售数据</el-button>
							<el-button :type="form2.day ? 'danger' : ''" @click="timechange2('day')">今天</el-button>
							<el-button :type="form2.yesterday ? 'danger' : ''" @click="timechange2('yesterday')">昨天
							</el-button>
							<el-button :type="form2.week ? 'danger' : ''" @click="timechange2('week')">最近一周</el-button>
							<el-button :type="form2.month ? 'danger' : ''" @click="timechange2('month')">最近30天
							</el-button>
							<el-date-picker style="width: 400px;margin-left: 10px;" v-model="form2.time"
								@change="timechange2" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
								range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
						</div>
						<div class="con">
							<div class="list">
								<div class="th">店铺名称</div>
								<div class="th">订单数量</div>
								<div class="th">审核通过数量</div>
								<div class="th">生产发货数量</div>
								<div class="th">退款数量</div>
								<div class="th">操作</div>
							</div>
							<div class="list " v-for="(item,index) in store.rows.data" :key="index">
								<div class="td">{{item.source}}</div>
								<div class="td">{{item.orders_all_amount}}</div>
								<div class="td">{{item.submit_all_amount}}</div>
								<div class="td">{{item.deliver_all_amount}}</div>
								<div class="td">{{item.refund_all_amount}}</div>
								<div class="td">
									<div class="seebtn" @click="seeSale(1,item.source)">查看销售构成</div>
								</div>
							</div>
							<div class="list">
								<div class="th tf">合计</div>
								<div class="th tf">{{store.total.orders_all_amount}}</div>
								<div class="th tf">{{store.total.submit_all_amount}}</div>
								<div class="th tf">{{store.total.deliver_all_amount}}</div>
								<div class="th tf">{{store.total.refund_all_amount}}</div>
								<div class="th tf"></div>
							</div>
							<div class="seemore">
								<router-link class="morebtn" to="/dataExcel/store_report"
									v-if="store.rows.data.length >= more">查看更多...</router-link>
							</div>
						</div>
					</div>
					<div v-if="tab == 2 && func.L03" >
						<div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
						<div class="btn-box">
							<div class="search">
								<el-input v-model="form3.merchant_name" placeholder="请输入分销商"></el-input>
								<el-button type="danger" @click="searchBtn('distributors')">检索</el-button>
							</div>
							<el-button type="danger" @click="daochu">导出店铺销售数据</el-button>
							<el-button :type="form3.day ? 'danger' : ''" @click="timechange3('day')">今天</el-button>
							<el-button :type="form3.yesterday ? 'danger' : ''" @click="timechange3('yesterday')">昨天
							</el-button>
							<el-button :type="form3.week ? 'danger' : ''" @click="timechange3('week')">最近一周</el-button>
							<el-button :type="form3.month ? 'danger' : ''" @click="timechange3('month')">最近30天
							</el-button>
							<el-date-picker style="width: 400px;margin-left: 10px;" v-model="form3.time"
								@change="timechange3" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
								range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
						</div>
						<div class="con">
							<div class="list">
								<div class="th">分销商</div>
								<div class="th">订单数量</div>
								<div class="th">审核通过数量</div>
								<div class="th">生产发货数量</div>
								<div class="th">操作</div>
							</div>
							<div class="list " v-for="item in distributors.rows.data" :key="item.child_id">
								<div class="td">{{item.name}}</div>
								<div class="td">{{item.orders_all_amount}}</div>
								<div class="td">{{item.submit_all_amount}}</div>
								<div class="td">{{item.deliver_all_amount}}</div>
								<div class="td">
									<div class="seebtn" @click="seeSale(2,item.child_id)">查看销售构成</div>
								</div>
							</div>
							<div class="list">
								<div class="th tf">合计</div>
								<div class="th tf">{{distributors.total.orders_all_amount}}</div>
								<div class="th tf">{{distributors.total.submit_all_amount}}</div>
								<div class="th tf">{{distributors.total.deliver_all_amount}}</div>
								<div class="th tf"></div>
							</div>
							<div class="seemore">
								<router-link class="morebtn" to="/dataExcel/distributors_report"
									v-if="distributors.rows.data.length >= more">查看更多...</router-link>
							</div>
						</div>
					</div>
				</div>

				<div class="sales-situation" v-loading="productloading">
					<div v-if="func.L04" style="padding-bottom: 20px;">
						<div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
						<div class="title">产品销售情况</div>
								<div class="btn-box" style="justify-content: space-between; padding-bottom: 0;">
									<div class="search">
										<el-input v-model="form4.product_name" style="width: 130px;" placeholder="请输入产品名称">
										</el-input>
										<el-input v-model="form4.product_source" style="width: 130px;" placeholder="请输入产品渠道">
										</el-input>
										<el-button type="danger" @click="searchBtn('product')">检索</el-button>

									</div>
									<div>
										<el-button :type="form4.day ? 'danger' : ''" @click="timechange4('day')">今天</el-button>
										<el-button :type="form4.yesterday ? 'danger' : ''" @click="timechange4('yesterday')">昨天
										</el-button>
										<el-button :type="form4.week ? 'danger' : ''" @click="timechange4('week')">最近一周</el-button>
										<el-button :type="form4.month ? 'danger' : ''" @click="timechange4('month')">最近30天
										</el-button>
										<el-date-picker style="width: 400px;margin-left: 10px;" v-model="form4.time"
											@change="timechange4" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
											range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
									</div>

								</div>
								<div>
									<el-button type="danger" @click="daochu2" style="margin:20px;">导出产品销售数据</el-button>
								</div>
								<div class="con">
									<div class="list">
										<div class="th">所属渠道</div>
										<div class="th">基础产品</div>
										<div class="th" style="flex: 2.6 !important;">产品编码</div>
										<div class="th">订单数量</div>
										<div class="th">审核通过数量</div>
										<div class="th">生产发货数量</div>
										<div class="th">订单发货率</div>
										<!--              <div class="th">激活数</div>
						  <div class="th">激活率</div> -->
										<!-- <div class="th">操作</div> -->
									</div>
									<div class="list " v-for="item in product" :key="item.name"
										style="border-left: 1px #D8D8D8 solid; box-sizing: border-box;">
										<div style="width: 100%; display: flex;">
											<div style="flex: 1; overflow: hidden;">{{item.name}}</div>
											<div style=" flex:8; overflow: hidden;">
												<div style="display: flex;" v-for="(item2,index) in item.con" :key="index">
													<!-- <div class="td" v-if="item2.product_source == ''">无</div>
									<div class="td" v-if="item2.product_source != ''">{{item2.product_source}}</div> -->
													<div class="td">{{item2.product_name}}</div>
													<div class="td" style="flex: 2.6 !important;">{{item2.product_sku}}</div>
													<div class="td">{{item2.orders_all_amount}}</div>
													<div class="td">{{item2.submit_all_amount}}</div>
													<div class="td">{{item2.deliver_all_amount}}</div>
													<div class="td" style="box-sizing: border-box;">
														{{Math.round((item2.deliver_all_amount/item2.orders_all_amount)*100)+'%'}}
													</div>
												</div>

												<!--                  <div class="td">-</div>
						      <div class="td">-</div> -->
												<!-- <div class="td">
						        <div class="seebtn" @click="seeSale(3,item.parent_page_id)">查看订单来源</div>
						      </div> -->
											</div>
										</div>


									</div>
									<!--            <div class="list " v-for="item in product.data" :key="item.parent_page_id">
						  <div class="td">{{item.name}}</div>
						  <div class="td">{{item.orders_all_amount}}</div>
						  <div class="td">{{item.submit_all_amount}}</div>
						  <div class="td">{{item.deliver_all_amount}}</div>
						  <div class="td">{{Math.round((item.deliver_all_amount/item.orders_all_amount)*100)+'%'}}</div>
						  <div class="td">-</div>
						  <div class="td">-</div>
						  <div class="td">
						    <div class="seebtn" @click="seeSale(3,item.parent_page_id)">查看订单来源</div>
						  </div>
						</div> -->
									<!-- <div class="seemore"><router-link class="morebtn" to="/dataExcel/product_report" v-if="product.data.length >= more">查看更多...</router-link></div> -->
								</div>
					</div>




					<div class="sales-situation" v-loading="productloading2"  v-if="func.L05">
						<div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
						<div class="title">商品销售情况</div>
						<div class="btn-box">
							<div class="search">
								<el-input v-model="form5.product_name" placeholder="请输入产品名称"></el-input>
								<el-button type="danger" @click="searchBtn('product')">检索</el-button>
								<!--                        <el-button type="danger" @click="daochu">导出统计数据</el-button> -->
							</div>
							<el-button :type="form5.day ? 'danger' : ''" @click="timechange5('day')">今天</el-button>
							<el-button :type="form5.yesterday ? 'danger' : ''" @click="timechange5('yesterday')">昨天
							</el-button>
							<el-button :type="form5.week ? 'danger' : ''" @click="timechange5('week')">最近一周</el-button>
							<el-button :type="form5.month ? 'danger' : ''" @click="timechange5('month')">最近30天
							</el-button>
							<el-date-picker style="width: 400px;margin-left: 10px;" v-model="form5.time"
								@change="timechange5" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
								range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
						</div>
						<div class="con">
							<div class="list">
								<div class="th">基础产品</div>
								<div class="th">订单数量</div>
								<div class="th">审核通过数量</div>
								<div class="th">生产发货数量</div>
								<div class="th">订单发货率</div>
								<!--                        <div class="th">激活数</div>
                        <div class="th">激活率</div> -->
								<div class="th">操作</div>
							</div>
							<div class="list " v-for="item in product2.data" :key="item.parent_page_id">
								<div class="td">{{item.name}}</div>
								<div class="td">{{item.orders_all_amount}}</div>
								<div class="td">{{item.submit_all_amount}}</div>
								<div class="td">{{item.deliver_all_amount}}</div>
								<div class="td">{{Math.round((item.deliver_all_amount/item.orders_all_amount)*100)+'%'}}
								</div>
								<!--                        <div class="td">-</div>
                        <div class="td">-</div> -->
								<div class="td">
									<div class="seebtn" @click="seeSale(3,item.parent_page_id)">查看订单来源</div>
								</div>
							</div>
							<div class="seemore">
								<router-link class="morebtn" to="/dataExcel/dataReport/product_report">查看更多...</router-link>
							</div>
						</div>
					</div>

				</div>


			</div>
		</div>
		<el-dialog title="导出统计数据" :visible.sync="daochulog" :close-on-press-escape="false" :close-on-click-modal="false"
			width="800px">

			<el-form ref="form" @submit.native.prevent label-width="180px">
				<el-form-item label="商品名称:">
					<el-select v-model="daochushopid" multiple collapse-tags filterable placeholder="请选择商品">
						<el-option v-for="item in shoplists" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择时间:">
					<el-date-picker v-model="daochutime" @change="daochutimechange" value-format="yyyy-MM-dd HH:mm:ss"
						:clearable="false" type="datetimerange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期"></el-date-picker>
				</el-form-item>
			</el-form>
			<div></div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="daochugo">导出</el-button>
			</span>
		</el-dialog>
		<!-- <foot></foot> -->
	</div>
</template>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from "@/components/foot.vue";
	import moment from 'moment'
	export default {
		components: {
			left: left,
			top: top,
			foot: foot
		},
		name: "dataReport",
		data() {
			return {
				day: "",
				ydata: {},
				number: {},
				salesloading: false,
				loading: false,
				productloading: false,
				productloading2: false,
				row_end: 7,
				more: 10, //超过10个显示查看更多
				form: {

				},
				form1: {
					day: 'day',
					yesterday: '',
					week: '',
					month: '',
					time: '',
					start_time: '',
					end_time: ''
				},
				form2: {
					day: 'day',
					yesterday: '',
					week: '',
					month: '',
					time: '',
					start_time: '',
					end_time: ''
				},
				form3: {
					merchant_name: '',
					day: 'day',
					yesterday: '',
					week: '',
					month: '',
					time: '',
					start_time: '',
					end_time: ''
				},
				form4: {
					product_source: "",
					product_name: '',
					day: 'day',
					yesterday: '',
					week: '',
					month: '',
					time: '',
					start_time: '',
					end_time: ''
				},
				form5: {
					product_source: "",
					product_name: '',
					day: 'day',
					yesterday: '',
					week: '',
					month: '',
					time: '',
					start_time: '',
					end_time: ''
				},
				allsale: {
					rows: {
						data: []
					}
				}, //概况
				store: {
					rows: {
						data: []
					},
					total: {}
				}, //店铺
				distributors: {
					rows: {
						data: []
					},
					total: {}
				}, // 分销商
				product: [], //产品
				product2: [], //产品
				tab: 1,
				page_size: 10,
				daochulog: false,
				shoplists: "",
				daochushopid: "",
				daochutime: "",
				func:{
					L01:false,
					L02:false,
					L03:false,
					L04:false,
					L05:false
				}
			}
		},
		created() {

			//权限问题
			var user = JSON.parse(localStorage.getItem('USER'));
			let arr = []
			for(let i in user.functions){
				arr.push(user.functions[i].code)
			}
			if (arr.includes('L01')){
				this.func.L01 = true
			}
			if (arr.includes('L02')){
				this.func.L02 = true
			}

			if (arr.includes('L03')){
				this.func.L03 = true
			}

			if (arr.includes('L04')){
				this.func.L04 = true
			}

			if (arr.includes('L05')){
				this.func.L05 = true
			}


				// 	if (this.user_func[i] != null) {
				// 		var func_number = this.user_func[i].code
				// 	}
				// 	if (func_number.indexOf("C02") >= 0) {
				// 		this.func_C02 = true
				// 	}
				// }

				//ceshi
				this.salesloading = true
			this.loading = true
			this.productloading = true
			this.form1.end_time = this.form2.end_time = this.form3.end_time = this.form4.end_time = this.form5.end_time =
				moment()
				.format("YYYY-MM-DD");
			this.form1.start_time = this.form2.start_time = this.form3.start_time = this.form4.start_time = this.form5
				.start_time = moment()
				.format("YYYY-MM-DD");

			this.getTopData()
			this.getSaleData()
			this.getStoreData()
			this.getProductData()
			this.getshops()
			this.getData()
		},
		mounted() {

		},
		methods: {
			getshops: function() {
				var that = this
				axios.get('/api/plan-market/pages/list')
					.then(response => {
						if (response.data.msg.code == 0) {
							that.shoplists = response.data.data
						} else {
							if (response.data.msg.code == 50401) {
								that.$router.push({
									path: "/login"
								});
								return false
							}
							that.$message.error(response.data.msg.info);
						}
					})
			},
			daochu: function() {
				this.daochulog = true
			},
			daochugo: function() {
				var that = this
				axios.get('/api/plan-market/data/product/detail/exp?start_date=' + this.daochutime[0] + '&end_date=' +
						this.daochutime[1] + '&product_ids=' + this.daochushopid)
					.then(response => {
						if (response.data.msg.code == 0) {
							window.location.href = window.location.origin + '/' + response.data.data
						} else {
							if (response.data.msg.code == 50401) {
								that.$router.push({
									path: "/login"
								});
								return false
							}
							that.$message.error(response.data.msg.info);
						}
					})
			},
			daochu2: function() {
				var that = this
				let url =
					`/api/plan-market/data/product/export?start_date=${this.form4.start_time}&end_date=${this.form4.end_time}&product_name=${this.form4.product_name}&product_source=${this.form4.product_source}`
				axios.get(url)
					.then(response => {
						if (response.data.msg.code == 0) {
							window.location.href = window.location.origin + '/' + response.data.data
						} else {
							if (response.data.msg.code == 50401) {
								that.$router.push({
									path: "/login"
								});
								return false
							}
							that.$message.error(response.data.msg.info);
						}
					})
			},
			daochutimechange: function() {

			},
			//选择时间
			timechange1: function(val) {
				this.form1.day = "";
				this.form1.yesterday = "";
				this.form1.week = "";
				this.form1.month = "";
				this.form1.time = "";
				switch (val) {
					case 'day':
						this.form1.day = "day";
						this.form1.end_time = moment()
							.format("YYYY-MM-DD");
						this.form1.start_time = moment()
							.format("YYYY-MM-DD");
						break;
					case 'yesterday':
						this.form1.yesterday = "yesterday";
						this.form1.end_time = moment()
							.subtract(1, "days")
							.format("YYYY-MM-DD");
						this.form1.start_time = moment()
							.subtract(1, "days")
							.format("YYYY-MM-DD");
						break;
					case 'week':
						this.form1.week = "week";
						this.form1.end_time = moment()
							.format("YYYY-MM-DD");
						this.form1.start_time = moment()
							.subtract(7, "days")
							.format("YYYY-MM-DD");
						break;
					case 'month':
						this.form1.month = "month";
						this.form1.end_time = moment()
							.format("YYYY-MM-DD");
						this.form1.start_time = moment()
							.subtract(30, "days")
							.format("YYYY-MM-DD");
						break;
					default:
						this.form1.time = val;
						this.form1.end_time = val[1];
						this.form1.start_time = val[0];
						break;
				}
				this.salesloading = true
				//调接口
				this.getSaleData()
			},
			timechange2: function(val) {
				this.form2.day = "";
				this.form2.yesterday = "";
				this.form2.week = "";
				this.form2.month = "";
				this.form2.time = "";
				switch (val) {
					case 'day':
						this.form2.day = "day";
						this.form2.end_time = moment()
							.format("YYYY-MM-DD");
						this.form2.start_time = moment()
							.format("YYYY-MM-DD");
						break;
					case 'yesterday':
						this.form2.yesterday = "yesterday";
						this.form2.end_time = moment()
							.subtract(1, "days")
							.format("YYYY-MM-DD");
						this.form2.start_time = moment()
							.subtract(1, "days")
							.format("YYYY-MM-DD");
						break;
					case 'week':
						this.form2.week = "week";
						this.form2.end_time = moment()
							.format("YYYY-MM-DD");
						this.form2.start_time = moment()
							.subtract(7, "days")
							.format("YYYY-MM-DD");
						break;
					case 'month':
						this.form2.month = "month";
						this.form2.end_time = moment()
							.format("YYYY-MM-DD");
						this.form2.start_time = moment()
							.subtract(30, "days")
							.format("YYYY-MM-DD");
						break;
					default:
						this.form2.time = val;
						this.form2.end_time = val[1];
						this.form2.start_time = val[0];
						break;
				}
				this.loading = true
				//调接口
				this.getStoreData()
			},
			timechange3: function(val) {
				this.form3.day = "";
				this.form3.yesterday = "";
				this.form3.week = "";
				this.form3.month = "";
				this.form3.time = "";
				switch (val) {
					case 'day':
						this.form3.day = "day";
						this.form3.end_time = moment()
							.format("YYYY-MM-DD");
						this.form3.start_time = moment()
							.format("YYYY-MM-DD");
						break;
					case 'yesterday':
						this.form3.yesterday = "yesterday";
						this.form3.end_time = moment()
							.subtract(1, "days")
							.format("YYYY-MM-DD");
						this.form3.start_time = moment()
							.subtract(1, "days")
							.format("YYYY-MM-DD");
						break;
					case 'week':
						this.form3.week = "week";
						this.form3.end_time = moment()
							.format("YYYY-MM-DD");
						this.form3.start_time = moment()
							.subtract(7, "days")
							.format("YYYY-MM-DD");
						break;
					case 'month':
						this.form3.month = "month";
						this.form3.end_time = moment()
							.format("YYYY-MM-DD");
						this.form3.start_time = moment()
							.subtract(30, "days")
							.format("YYYY-MM-DD");
						break;
					default:
						this.form3.time = val;
						this.form3.end_time = val[1];
						this.form3.start_time = val[0];
						break;
				}
				this.loading = true
				//调接口
				this.getDistributorsData()
			},
			timechange4: function(val) {
				console.log(val)
				this.form4.day = "";
				this.form4.yesterday = "";
				this.form4.week = "";
				this.form4.month = "";
				this.form4.time = "";
				switch (val) {
					case 'day':
						this.form4.day = "day";
						this.form4.end_time = moment()
							.format("YYYY-MM-DD");
						this.form4.start_time = moment()
							.format("YYYY-MM-DD");
						break;
					case 'yesterday':
						this.form4.yesterday = "yesterday";
						this.form4.end_time = moment()
							.subtract(1, "days")
							.format("YYYY-MM-DD");
						this.form4.start_time = moment()
							.subtract(1, "days")
							.format("YYYY-MM-DD");
						break;
					case 'week':
						this.form4.week = "week";
						this.form4.end_time = moment()
							.format("YYYY-MM-DD");
						this.form4.start_time = moment()
							.subtract(7, "days")
							.format("YYYY-MM-DD");
						break;
					case 'month':
						this.form4.month = "month";
						this.form4.end_time = moment()
							.format("YYYY-MM-DD");
						this.form4.start_time = moment()
							.subtract(30, "days")
							.format("YYYY-MM-DD");
						break;
					default:
						this.form4.time = val;
						this.form4.end_time = val[1];
						this.form4.start_time = val[0];
						break;
				}
				this.productloading = true
				//调接口
				this.getData()
			},
			timechange5: function(val) {
				console.log(val)
				this.form5.day = "";
				this.form5.yesterday = "";
				this.form5.week = "";
				this.form5.month = "";
				this.form5.time = "";
				switch (val) {
					case 'day':
						this.form5.day = "day";
						this.form5.end_time = moment()
							.format("YYYY-MM-DD");
						this.form5.start_time = moment()
							.format("YYYY-MM-DD");
						break;
					case 'yesterday':
						this.form5.yesterday = "yesterday";
						this.form5.end_time = moment()
							.subtract(1, "days")
							.format("YYYY-MM-DD");
						this.form5.start_time = moment()
							.subtract(1, "days")
							.format("YYYY-MM-DD");
						break;
					case 'week':
						this.form5.week = "week";
						this.form5.end_time = moment()
							.format("YYYY-MM-DD");
						this.form5.start_time = moment()
							.subtract(7, "days")
							.format("YYYY-MM-DD");
						break;
					case 'month':
						this.form5.month = "month";
						this.form5.end_time = moment()
							.format("YYYY-MM-DD");
						this.form5.start_time = moment()
							.subtract(30, "days")
							.format("YYYY-MM-DD");
						break;
					default:
						this.form5.time = val;
						this.form5.end_time = val[1];
						this.form5.start_time = val[0];
						break;
				}
				this.productloading2 = true
				//调接口
				this.getProductData()
			},
			tabChange: function(o) {
				this.tab = o;
				this.loading = true
				//调接口
				if (this.tab == 1) {
					this.getStoreData()
				}
				if (this.tab == 2) {
					this.getDistributorsData()
				}
			},
			seeSale: function(index, id) {
				console.log(index);
				if (index == 1) {
					this.$router.push({
						path: "/dataExcel/store_sale",
						query: {
							id: id
						}
					});
				}
				if (index == 2) {
					this.$router.push({
						path: "/dataExcel/distributors_sale",
						query: {
							id: id
						}
					});
				}
				if (index == 3) {
					this.$router.push({
						path: "/dataExcel/product_sale",
						query: {
							id: id
						}
					});
				}
			},
			searchBtn: function(val) {
				console.log(val);
				if (val == 'distributors') {
					this.loading = true
					//调接口
					this.getDistributorsData()
				}
				if (val == 'product') {
					this.productloading = true
					//调接口
					this.getData()
				}
			},
			getTopData: function() {
				var that = this
				that.day = moment()
					.format("YYYY-MM-DD");
				axios.get('/api/plan-market/data/oneday?date=' + that.day).then(response => {
					if (response.data.msg.code == 0) {
						that.number = response.data.data
					}
				})

				axios.get('/api/plan-market/data/oneday').then(response => {
					if (response.data.msg.code == 0) {
						that.ydata = response.data.data
					}
				})
			},
			//销售情况
			getSaleData: function() {
				var that = this
				var url =
					`/api/plan-market/data/shops?start_date=${this.form1.start_time}&end_date=${this.form1.end_time}&row_end=${this.row_end}&page_size=${this.page_size}`
				axios.get(url).then(response => {
					if (response.data.msg.code == 0) {
						that.allsale = response.data.data
						that.salesloading = false
					}
				})
			},
			//店铺销售情况
			getStoreData: function() {
				var that = this
				var url =
					`/api/plan-market/data/source?start_date=${this.form2.start_time}&end_date=${this.form2.end_time}&page_size=${this.page_size}`
				axios.get(url).then(response => {
					if (response.data.msg.code == 0) {
						that.store = response.data.data
						that.loading = false
					}
				})
			},
			//分销商销售情况
			getDistributorsData: function() {
				var that = this
				var url =
					`/api/plan-market/data/merchant?start_date=${this.form3.start_time}&end_date=${this.form3.end_time}&merchant_name=${this.form3.merchant_name}&page_size=${this.page_size}`
				axios.get(url).then(response => {
					if (response.data.msg.code == 0) {
						that.distributors = response.data.data
						that.loading = false
					}
				})
			},
			getData: function() {

				var that = this
				var url =
					`/api/plan-market/data/product/source?start_date=${this.form4.start_time}&end_date=${this.form4.end_time}&product_name=${this.form4.product_name}&product_source=${this.form4.product_source}`
				axios.get(url).then(response => {
					if (response.data.msg.code == 0) {
						let o = response.data.data.data

						let arr = []
						let arr2 = []
						for (let i in o) {
							if (arr2.includes(o[i].product_source)) {
								for (let m in arr) {
									if (arr[m].name == o[i].product_source) {
										arr[m].con.push(o[i])
									}
								}
								// o[i].con.push(o[i])
							} else {
								let obj = {
									name: o[i].product_source,
									con: [o[i]]
								}
								arr2.push(o[i].product_source)
								arr.push(obj)

							}

						}
						that.product = arr
						this.productloading = false

					}
				})
			},
			//产品销售情况
			getProductData: function() {
				var that = this
				var url =
					`/api/plan-market/data/product?start_date=${this.form5.start_time}&end_date=${this.form5.end_time}&product_name=${this.form5.product_name}&page_size=${this.page_size}`
				axios.get(url).then(response => {
					if (response.data.msg.code == 0) {
						that.product2 = response.data.data
						that.productloading2 = false
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {

				.real-time-data {
					padding: 21px 27px;

					.t-box {
						display: flex;
						align-items: center;

						.title {
							display: inline-flex;
							background: #ffffff;
							font-size: 18px;
							font-weight: bold;
						}

						.update-time {
							display: inline-flex;
							margin-left: 830px;
							font-size: 14px;
						}
					}

					.order-data {
						display: flex;
						padding: 0 10px;

						.time-data-box {
							padding-right: 128px;
							display: flex;
							flex-direction: column;

							.order {
								display: flex;
								padding-top: 35px;
								padding-bottom: 23px;

								.order-icon {
									width: 46px;
									height: 46px;
									margin-right: 13px;
								}

								.text {
									display: flex;
									flex-direction: column;

									.tit {
										font-size: 14px;
									}

									.num {
										font-size: 20px;
									}
								}
							}

							.ydata {
								font-size: 14px;
							}
						}
					}
				}

				.sales-situation {
					.title {
						border-bottom: 1px solid #eaeaea;
						line-height: 45px;
						padding-left: 30px;
						font-size: 16px;
						background: #f9f9f9;
					}
				}

				.tabs {
					background: #f9f9f9;
					display: flex;

					.tab {
						flex-basis: 160px;
						line-height: 45px;
						display: block;
						color: #727272;
						border-top: 2px solid #f9f9f9;
						font-size: 14px;
						text-align: center;
						cursor: pointer;
					}

					.active {
						border-top: 2px solid #dd2727;
						background: #fff;
					}
          }

		.btn-box {
			display: flex;
			padding: 22px 20px 25px 20px;
			align-items: center;
			justify-content: flex-end;

			.search {
				margin-right: 40px;

				/deep/ .el-button--danger {
					padding: 9px 20px !important;
					border-radius: 4px;
				}
			}

			/deep/ .el-input {
				line-height: 32px;
				width: 170px;
			}

			/deep/ .el-button--danger {
				padding: 9px 10px !important;
			}

			/deep/ .el-button {
				padding: 9px 10px;
				line-height: 14px;
				border-radius: 0;
			}

			/deep/ .el-date-editor .el-range__icon {
				height: 32px;
			}
		}

		.con {
			.list {
				margin: 0 auto;
				
				display: flex !important;
				text-align: center;
				color: #646464;
				line-height: 45px;
				border-top: 1px #D8D8D8 solid;
				border-bottom: 1px #D8D8D8 solid;
				margin-top: -1px;

				.th {
					flex: 1 !important;
					background: #EEEEEE;
					font-size: 14px;
				}

				.td {
					flex: 1 !important;
					font-size: 14px;

					.seebtn {
						color: #197CFF;
						cursor: pointer;
					}
				}

				.th:first-child,
				.td:first-child {
					border-left: 1px #D8D8D8 solid;
				}

				.th:last-child,
				.td:last-child {
					border-right: 1px #D8D8D8 solid;
				}

				.t-total {
					background: #D9F0FF;
					width: 80px;
					flex: initial !important;
				}

				.tf {
					background: #F9F9F9;
				}
			}

			.seemore {
				margin: 20px 0;
				line-height: 35px;
				font-size: 14px;
				display: flex;
				justify-content: center;

				.morebtn {
					padding: 0 30px;
					color: #2488CB;
					background: #B1E4FF;
					cursor: pointer;
				}
			}
		}

		.con-table {
			:nth-of-type(1) {
				background: #EEEEEE;
			}

			:nth-of-type(2) {
				background: #D9F0FF;

				.td:first-child {
					background: #D9F0FF;
				}

				.td {
					line-height: 30px;
				}
			}
		}
	}
</style>
